var isValid = false;
var usernameValid = 0;
var passwordValid = 0;

$.fn.drag = function(options) { 
    var x, drag = this, isMove = false, defaults = { 
    }; 
    var options = $.extend(defaults, options); 
    //添加背景，文字，滑块 
    var html = '<div class="drag_bg"></div>' + 
            '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>' + 
            '<div class="handler handler_bg"></div>'; 
    this.append(html); 
 
    var handler = drag.find('.handler'); 
    var drag_bg = drag.find('.drag_bg'); 
    var text = drag.find('.drag_text'); 
    var maxWidth = drag.width() - handler.width();  //能滑动的最大间距 
 
    //鼠标按下时候的x轴的位置 
    handler.mousedown(function(e) { 
        isMove = true; 
        x = e.pageX - parseInt(handler.css('left'), 10); 
    }); 
 
    //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离 
    $(document).mousemove(function(e) { 
        var _x = e.pageX - x; 
        if (isMove) { 
            if (_x > 0 && _x <= maxWidth) { 
                handler.css({'left': _x}); 
                drag_bg.css({'width': _x}); 
            } else if (_x > maxWidth) {  //鼠标指针移动距离达到最大时清空事件 
                dragOk(); 
            } 
        } 
    }).mouseup(function(e) { 
        isMove = false; 
        var _x = e.pageX - x; 
        if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置 
            handler.css({'left': 0}); 
            drag_bg.css({'width': 0}); 
        } 
    }); 
 
    //清空事件 
    function dragOk() { 
        handler.removeClass('handler_bg').addClass('handler_ok_bg'); 
        text.text('验证通过'); 
        drag.css({'color': '#fff'}); 
        handler.unbind('mousedown'); 
        $(document).unbind('mousemove'); 
        $(document).unbind('mouseup'); 
    } 
};
//校验滑块
$(function(){
		var slider = new SliderUnlock("#slider",{
				successLabelTip : "验证成功"	
			},function(){
				isValid = true;
        	});
        slider.init();
	});

//登录表单校验
function changeSucceedStyle(nameID, spanID) { //如果输入成功的话，用来修改后面span的内容样式和输入框的颜色
    spanID.firstChild.nodeValue = "*";
    spanID.style.fontSize = "larger";
    spanID.style.color = "green";
}

function changeFailedStyle(nameID, spanID) { //输入失败而且焦点不在该输入框时的样式
    spanID.firstChild.nodeValue = "输入有误"; //设置后面的字体颜色、格式、大小
    spanID.style.fontSize = "small";
    spanID.style.color = "red";
    nameID.style.borderColor = "red";
}

function changeFailingStyle(nameID, spanID) { //输入失败时但是焦点还在该输入框时的样式
    spanID.style.fontSize = "small";
    spanID.style.color = "red";
    nameID.style.borderColor = "red";
}

function spanValue(spanID, spanValue) { //匹配失败时，修改后面字的总和
    switch(spanValue) {
        case "usernameSpan":
            spanID.firstChild.nodeValue = "6到13位数字";
            break;
        case "passwordSpan":
            spanID.firstChild.nodeValue = "6-16位：非空字符";
            break;
    }
}

function password() {
    var password = document.getElementById("pwd"); //得到密码的对象
    var passwordSpan = document.getElementById("passwordSpan");
    var pattern = /^[0-9a-zA-Z_]{6,16}$/;
    password.onfocus = function () { //获得焦点时根据匹配成功与否修改span中的样式和内容
        if (!pattern.test(password.value)) { //如果获得焦点时输入不正确，重新调整样式
            spanValue(passwordSpan, "passwordSpan"); //修改提示语句
            changeFailingStyle(password, passwordSpan);
        }
    }
    password.onkeyup = function () { //输入内容时判断根据输入的值修改span中的样式和内容,使用up不是down，因为down读取时候有出入
        if (pattern.test(password.value)) { //匹配成功
            changeSucceedStyle(password, passwordSpan);
        } else { //匹配失败
            spanValue(passwordSpan, "passwordSpan"); //修改提示语句
            changeFailingStyle(password, passwordSpan);
        }
    }

    password.onblur = function () { //失去焦点时根据匹配成功与否修改span中的样式和内容
        if (pattern.test(password.value)) { //匹配成功
            changeSucceedStyle(password, passwordSpan);
            passwordValid = 1;
        } else { //匹配失败
            changeFailedStyle(password, passwordSpan);
            passwordValid = 0;
        }
    };
}
function username() {
    var username = document.getElementById("nickname"); //得到用户名的对象
    var usernameSpan = document.getElementById("usernameSpan");
    var pattern=/^\d{6,13}$/;
    username.onfocus = function() { //获得焦点时根据匹配成功与否修改span中的样式和内容
        if(!pattern.test(username.value)) { //如果获得焦点时输入不正确，重新调整样式
            spanValue(usernameSpan, "usernameSpan"); //修改提示语句
            changeFailingStyle(username, usernameSpan);
        }
    };
    username.onkeyup = function() { //输入内容时判断根据输入的值修改span中的样式和内容,使用up不是down，因为down读取时候有出入
        if(pattern.test(username.value)) { //匹配成功
            changeSucceedStyle(username, usernameSpan);
        } else { //匹配失败
            spanValue(usernameSpan, "usernameSpan"); //修改提示语句
            changeFailingStyle(username, usernameSpan);
        }
    };

    username.onblur = function() { //失去焦点时根据匹配成功与否修改span中的样式和内容
        if(pattern.test(username.value)) { //匹配成功
            changeSucceedStyle(username, usernameSpan);
            usernameValid = 1;
        } else { //匹配失败
            changeFailedStyle(username, usernameSpan);
            usernameValid = 0;
        }
    }
}
function submit() { //对提交按钮进行设置

    var submit = document.getElementById("btn_login");
    var password = document.getElementById("pwd");
    var username = document.getElementById("nickname");

    submit.onclick = function() {
        if(usernameValid && passwordValid) {
            return isValid;
        } else {
            //对填写错误的那项进行聚焦，来提示错误
            if(!usernameValid) {
                alert("请正确填写用户名");
                username.setSelectionRange(username.value.length, username.value.length);
            }
            if(!passwordValid) {
                alert("请正确填写密码");
                password.setSelectionRange(password.value.length, password.value.length);
            }
            return false;
        }
    }
}
window.onload = function() {
    username();
    password();
    submit();
};

